import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { ConfigProvider, Spin } from 'antd'
import Header from './Header'
import Footer from './Footer'
import { TBread } from '@/components'

import zh_CN from 'antd/es/locale-provider/zh_CN'
// import moment from 'moment'
// import 'moment/locale/zh-cn'
import config from '@/config'
import styles from './index.module.less'
const { fullPages, customBreadPages } = config

// moment.locale('zh-cn')
// 全局layouts布局
const Layouts = ({
  history,
  location,
  children,

  fetchUserInfo,
  setupMenuSelectedKeys,
  fetchDic,
  gState,
}: any) => {
  console.log('layout function component')
  const { gLoading, pLoading } = gState

  useEffect(() => {
    fetchUserInfo()
    fetchDic()
  }, [fetchUserInfo, fetchDic])

  // 头部菜单
  const headerProps = {
    history,
    location,
    gState,
    setupMenuSelectedKeys,
  }

  // 面包屑
  const TBreadProps = {
    location,
    gState,
  }

  const hideBread = customBreadPages.some((page: string | RegExp) =>
    page instanceof RegExp
      ? (page as RegExp).test(location.pathname)
      : page === location.pathname,
  )

  // id为page_wrap的div 用于Select组件修改滚动的区域 解决Options滚动定位问题
  const mainPage = (
    <div className={styles['main_section']}>
      {!hideBread && <TBread {...TBreadProps} />}
      <div id="page_wrap">{children}</div>
    </div>
  )
  return (
    <ConfigProvider autoInsertSpaceInButton={false} locale={zh_CN}>
      <Spin spinning={gLoading} size="large">
        {fullPages.includes(location.pathname) ? (
          <div id="page_wrap">{children}</div>
        ) : (
          <div className={styles['body_wrap']}>
            <Header {...headerProps} />
            <Spin spinning={pLoading}>{mainPage}</Spin>
            <Footer />
          </div>
        )}
        {/* 下载用 */}
        <div style={{ display: 'none' }} id="download"></div>
      </Spin>
    </ConfigProvider>
  )
}

export default connect(
  (state: any) => ({
    gState: state.gState,
  }),
  (dispatch) => ({
    fetchUserInfo: () => dispatch({ type: 'G/fetchUserInfo' }),
    setupMenuSelectedKeys: (list: any[]) =>
      dispatch({ type: 'G/setupMenuSelectedKeys', payload: list }),
    fetchDic: () => dispatch({ type: 'G/fetchDic' }),
  }),
)(withRouter(Layouts))
